<template>
  <div class="main">
    <!-- 规则介绍页 -->
    <div v-if="page == 0">
      <introduce :title="title" :time="time" :desc="desc" @nextPage="nextPage" />
    </div>
    <!-- 做题页面 -->
    <div v-else-if="page == 1">
      <div class="test-title">根据第1、2行的规律，选出第3行中缺少的图形</div>
      <div class="pic-wrap">
        <!-- 题目 -->
        <div class="pic-topic-col" v-for="(item, i) in test1.topic" :key="i">
          <div class="pic">
            <img :src="item.image1" alt="" />
          </div>
          <div class="pic">
            <img :src="item.image2" alt="" />
          </div>
          <div class="pic">
            <img :src="item.image3" alt="" />
          </div>
          <div class="pic">
            <img :src="item.image4" alt="" />
          </div>
        </div>
        <!-- 选项 -->
        <div class="pic-option-col">
          <div v-for="(item, i) in test1.option" :key="i">
            <div :class="item.picked ? picked : unpicked" @click="t1Choose">
              <img :src="item.url" alt="" />
            </div>
          </div>
        </div>
      </div>
      <el-button @click="toPage2" type="primary" round style="margin: 20px">下一题</el-button>
    </div>
    <div v-else-if="page == 2">
      <div class="test-title">看图找规律</div>
      <!-- 题目 -->
      <div class="pic-topic-col" style="width:500px" v-for="(item, i) in test2.topic" :key="i">
        <div class="pic1">
          <img :src="item.image1" alt="" />
        </div>
        <div class="pic1">
          <img :src="item.image2" alt="" />
        </div>
        <div class="pic1">
          <img :src="item.image3" alt="" />
        </div>
        <div class="pic1">
          <img :src="item.imageabc" style="height:60px; margin-top:10px" alt="" />
        </div>
      </div>
      <div class="desc">1.选出你认为该填在A里面的图形</div>
      <div class="pic-option-col" style="width:420px">
        <div v-for="(item, i) in test2.option1" :key="i">
          <div :class="item.picked ? picked1 : unpicked1" @click="t21Choose">
            <img :src="item.url" alt="" style="height:70px" />
          </div>
        </div>
      </div>
      <div class="desc">2.选出你认为该填在B里面的图形</div>
      <div class="pic-option-col" style="width:420px">
        <div v-for="(item, i) in test2.option2" :key="i">
          <div :class="item.picked ? picked1 : unpicked1" @click="t22Choose">
            <img :src="item.url" alt="" style="height:70px" />
          </div>
        </div>
      </div>
      <div class="desc">3.选出你认为不符合前三个图形规律的图形</div>
      <div class="pic-option-col" style="width:420px">
        <div v-for="(item, i) in test2.option3" :key="i">
          <div :class="item.picked ? picked1 : unpicked1" @click="t23Choose">
            <img :src="item.url" alt="" style="height:70px" />
          </div>
        </div>
      </div>
      <el-button @click="toPage1" round style="margin: 20px">上一题</el-button>
      <el-button @click="toResult" type="primary" round style="margin: 20px">提交</el-button>
    </div>

    <!-- 结果显示页面 -->
    <div v-else>
      <div class="show-result">本节共有4个题，您答对<span style="color: #0dbc79;padding:0 5px;font-size:1.4em">{{ score }}</span>题
      </div>
      <div class="next-btn">
        <el-button type="primary" round @click="nextAss">继续测评</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import introduce from "./../com/introduce.vue";
import { RavenCalc } from './../../../api/access';


export default {
  name: "ass03",
  data: function () {
    return {
      page: 0,
      title: "看图找规律",
      time: 6,
      desc: "请根据给出的图片寻找规律，然后从四个选项中选择一张最符合规律的图片",
      test1: {
        topic: [
          {
            date: "A",
            image1: "../../../static/ass03/1-A01.PNG",
            image2: "../../../static/ass03/1-A02.PNG",
            image3: "../../../static/ass03/1-A03.PNG",
            image4: "../../../static/ass03/1-A04.PNG",
          },
          {
            date: "B",
            image1: "../../../static/ass03/1-B01.PNG",
            image2: "../../../static/ass03/1-B02.PNG",
            image3: "../../../static/ass03/1-B03.PNG",
            image4: "../../../static/ass03/1-B04.PNG",
          },
          {
            date: "C",
            image1: "../../../static/ass03/1-C01.PNG",
            image2: "../../../static/ass03/1-C02.PNG",
            image3: "../../../static/ass03/1-C03.PNG",
            image4: "",
          },
        ],
        option: [
          { url: "../../../static/ass03/1-multi1.PNG", picked: false },
          { url: "../../../static/ass03/1-multi2.PNG", picked: false },
          { url: "../../../static/ass03/1-multi3.PNG", picked: false },
        ],
      },
      test2: {
        topic: [
          {
            image1: "../../../static/ass03/2-A01.PNG",
            image2: "../../../static/ass03/2-A02.PNG",
            image3: "../../../static/ass03/2-A03.PNG",
            imageabc: "../../../static/ass03/A.png",
          },
          {
            image1: "../../../static/ass03/2-B01.PNG",
            image2: "../../../static/ass03/2-B02.PNG",
            image3: "../../../static/ass03/2-B03.PNG",
            imageabc: "../../../static/ass03/B.png",
          },
          {
            image1: "../../../static/ass03/2-C01.PNG",
            image2: "../../../static/ass03/2-C02.PNG",
            image3: "../../../static/ass03/2-C03.PNG",
            imageabc: "../../../static/ass03/C.png",
          },
        ],
        option1: [
          { url: "../../../static/ass03/2-101.PNG", picked: false },
          { url: "../../../static/ass03/2-102.PNG", picked: false },
          { url: "../../../static/ass03/2-103.PNG", picked: false },
        ],
        option2: [
          { url: "../../../static/ass03/2-201.PNG", picked: false },
          { url: "../../../static/ass03/2-202.PNG", picked: false },
          { url: "../../../static/ass03/2-203.PNG", picked: false },
        ],
        option3: [
          { url: "../../../static/ass03/2-301.PNG", picked: false },
          { url: "../../../static/ass03/2-302.PNG", picked: false },
          { url: "../../../static/ass03/2-303.PNG", picked: false },
        ],
      },
      picked: "picked-option",
      unpicked: "option",
      picked1: "picked-option1",
      unpicked1: "option1",
      score: 0,
    };
  },
  methods: {
    // 由介绍页到第一页
    nextPage: function () {
      this.page = 1;
    },
    t1Choose: function (e) {
      let target = e.target;
      console.log(target);
      let picUrl = target.src.slice(28);
      for (let i = 0; i < this.test1.option.length; i++) {
        console.log(i);
        if (this.test1.option[i].url.search(picUrl) != -1) {
          this.test1.option[i].picked = true;
        } else {
          this.test1.option[i].picked = false;
        }
      }
      console.log(picUrl);
    },
    t21Choose: function (e) {
      let target = e.target;
      console.log(target);
      let picUrl = target.src.slice(28);
      for (let i = 0; i < this.test2.option1.length; i++) {
        console.log(i);
        if (this.test2.option1[i].url.search(picUrl) != -1) {
          this.test2.option1[i].picked = true;
        } else {
          this.test2.option1[i].picked = false;
        }
      }
      console.log(picUrl);
    },
    t22Choose: function (e) {
      let target = e.target;
      console.log(target);
      let picUrl = target.src.slice(28);
      for (let i = 0; i < this.test2.option2.length; i++) {
        console.log(i);
        if (this.test2.option2[i].url.search(picUrl) != -1) {
          this.test2.option2[i].picked = true;
        } else {
          this.test2.option2[i].picked = false;
        }
      }
      console.log(picUrl);
    },
    t23Choose: function (e) {
      let target = e.target;
      console.log(target);
      let picUrl = target.src.slice(28);
      for (let i = 0; i < this.test2.option3.length; i++) {
        console.log(i);
        if (this.test2.option3[i].url.search(picUrl) != -1) {
          this.test2.option3[i].picked = true;
        } else {
          this.test2.option3[i].picked = false;
        }
      }
      console.log(picUrl);
    },
    toPage2: function () {
      this.page = 2;
    },
    toPage1: function () {
      this.page = 1;
    },
    toResult: function () {
      if (this.test1.option[0].picked == true) {
        this.score++;
      }
      if (this.test2.option1[1].picked == true) {
        this.score++;
      }
      if (this.test2.option2[0].picked == true) {
        this.score++;
      }
      if (this.test2.option3[0].picked == true) {
        this.score++;
      }
      RavenCalc({
        uid: this.$store.state.User.uid,
        score: this.score
      }).then(res => {
        if (res.rescode == 200) {
          this.page = 3;
        }
    })
  },
  nextAss: function () {
    this.$emit("nextAss");
  }
},
components: { introduce },
mounted() { },
};
</script>

<style scoped lang="less">
.main {
  box-sizing: border-box;
  height: 100%;
}

.title {
  box-sizing: border-box;
  font-size: 2.8em;
  color: #6b5ef7;
  font-weight: 600;
  margin-top: 20px;
}

.test-title {
  font-size: 25px;
  height: 60px;
  margin: auto;
  line-height: 40px;
}

.pic-wrap {
  min-height: 400px;
  margin: auto;
  width: 800px;
  padding: 0;
}

.desc {
  font-size: 1.4em;
  line-height: 1.7em;
  /* width: 60%; */
  margin: 20px 0 0 33%;
  text-align: left;
}

.pic-topic-col {
  display: flex;
  margin: auto;
  width: 800px;
}

.pic-option-col {
  display: flex;
  margin: auto;
  width: 600px;
}

.pic-option-col .option {
  padding: 0 20px 0 20px;
  padding: 10px;
  margin: 20px 20px 0 0;
  width: 170px;
  height: 110px;
  box-shadow: 0 0 0 2px #c1c1c1;
  border-radius: 10px;
}

.pic-option-col .option1 {
  padding: 10px;
  margin: 20px 20px 0 0;
  width: 100px;
  height: 70px;
  box-shadow: 0 0 0 2px #c1c1c1;
  border-radius: 10px;
}

.pic-option-col .picked-option1 {
  border: 6px solid #409eff;
  padding: 10px;
  margin: 20px 20px 0 0;
  width: 100px;
  height: 60px;
  box-shadow: 0 0 0 2px #c1c1c1;
  border-radius: 10px;
}

.pic-option-col .picked-option {
  padding: 0 20px 0 20px;
  border: 6px solid #409eff;
  padding: 10px;
  margin: 20px 20px 0 0;
  width: 170px;
  height: 100px;
  box-shadow: 0 0 0 2px #c1c1c1;
  border-radius: 10px;
}

.pic-option-col .option1:hover {
  cursor: pointer;
}

.pic-option-col .picked-option1:hover {
  cursor: pointer;
}

.pic-option-col .option:hover {
  cursor: pointer;
}

.pic-option-col .picked-option:hover {
  cursor: pointer;
}

.pic-topic-col .pic {
  padding: 0 20px 0 20px;
  border: 1px solid #d4d4d4;
  padding: 1px;
  height: 120px;
  width: 200px;
  display: inline;
}

.pic-topic-col .pic1 {
  padding: 0 20px 0 20px;
  border: 1px solid #d4d4d4;
  padding: 1px;
  height: 80px;
  width: 120px;
  display: inline;
}

.show-result {
  padding: 100px 0;
  font-size: 1.5em;
  font-weight: bold;
}
</style>
